（html + css + js）实现视频的倍速播放

2023-08-16 14:03| 来源: 网络整理| 查看: 265

前言

相信大家都有过看视频想要按照自己所想的去调倍速的冲动，那么今天它就来了。我会带大家去实现这个功能，话不多说，先给大家展示一下效果。

一、页面展示

在这里插入图片描述

相信看到效果的小伙伴已经感兴趣了，那么接下来给大家讲解一下如何去实现

二、网页实现 1.找到自己想播放的视屏地址，把它放进容器中

代码如下（html）：

1x 2.把视屏放在一个合适的位置

这就需要大家用css去定义了代码如下（css）：

*{ margin: 0; padding: 0; } body{ min-height: 100vh;/*相对于浏览器的高度 */ background: #4c4c4c url('https://unsplash.it/1500/900?image=1021');/*如果图片没有加载出来就会优先显示颜色 */ background-size: cover; display: flex;/*把父容器设置为弹性*/ justify-content: center;/*在X轴上居中*/ align-items: center;/*在Y轴上居中 */ } #wrapper{ width: 850px; display: flex; } 3.在视屏旁边创建一个倍速的拉动框 .speed{ flex: 1;/* 等比继承*/ margin: 10px; background-color: white; border-radius: 50px; display: flex; overflow: hidden; align-items: flex-start;/*从弹性开始的地方去布局*/ } .speed-bar{ width: 100%; height: 16.3%; background: linear-gradient(-170deg,#2376ae 0%, #c16ecf 100%); display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer;/*把鼠标变成手的样子*/ }

好了，这样整体的布局已经全部做好了，接下来就是要去实现鼠标移动，视屏的倍速也跟着移动。那么大家可以先思考一下如何去实现。

4.用js去实现鼠标监听事件

代码如下（js）：

var speed = document.querySelector('.speed')//querySelector获取类名的方法 var bar = document.querySelector('.speed-bar') var video = document.querySelector('.flex') // 监听什么什么事件(鼠标滑动) 里面的function是监听函数 speed.addEventListener('mousemove',function(e){ console.log(e); var y = e.pageY - speed.offsetTop // offsetTop是获取某个dom结构到浏览器顶部的距离 var percent = y / speed.offsetHeight // offsetHeight是获取某个dom结构自身的高度 var min = 0.4 var max = 4 var height = Math.round(percent*100) + '%' // Math.round() 取整 var palybackRate = percent * (max - min) + min bar.style.height = height; bar.textContent = palybackRate.toFixed(2) + 'X' // toFixed(2)保留2位小数 video.playbackRate = palybackRate // video.playbackRate控制video播放速度 }) 总结

以上就是今天要跟大家分享的内容，本文制作比较简单，代码还是不太成熟。希望大家都能看懂。也希望大佬们多多指点。我已经附上了全部代码，很高兴大家能快速的刷着视频。

【本文地址】

公司简介

联系我们